<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
	<style>
		.time{
			font-family: cursive;
			font-size: 14px;
			stroke: black;
			stroke-width:2;
		}
	</style>
</head>
<body>
	
	<div class="time">
		
	</div>
	
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 500;
		var height = 500
		var svg = d3.select(".time").append('svg').attr({"width":width,"height":height});

		function getTimeString() {
			var time = new Date();

			var hours = time.getHours();
			var minutes = time.getMinutes();
			var seconds = time.getSeconds();

			hours = hours > 10 ? hours : "0" + hours;
			minutes = minutes > 10 ? minutes : "0" + minutes;
			seconds = seconds > 10 ? seconds : "0" + seconds;

			return hours + ":" + minutes + ":" + seconds;
		}

		var timeText = svg.append("text")
											.attr("x",100)
											.attr("y",100)
											.attr("class","time")
											.text(getTimeString())

		setInterval(updateTime,1000);

		function updateTime() {
			timeText.text(getTimeString())
		}
	</script>
</body>
</html>